<template>
  <div :style="{height: loginHeight}" class="oms_allBg">
    <div class="oms-header-box">
      <div class="imgBox">
        <img src="/static/images/zhiXiangLogo.png">
        <span class="header-text">首页</span>
      </div>
    </div>
    <div class="oms-login-content">
      <div class="login-window-box">
        <div class="login-box-left">

        </div>
        <div class="login-box-content">
          <!--<el-form ref="loginForm" :model="model" class="login-form" auto-complete="on" label-position="left">-->
          <el-row>
            <div v-if="active == 1">
              <el-form ref="userLoginForm" :model="userLoginForm" class="login-form" auto-complete="on" label-position="left">
                <el-col :span="24">
                  <div class="title-container">
                    <p class="lg-title"><span>登录SaaS云</span></p>
                    <p class="title">
                      <a href="javascript:;" :class="{'check-login': active == 1}" @click="active = 1">账号登录</a>
                      <span style="padding: 0px 26px;font-size: 16px;color:#979797"> |</span>
                      <a href="javascript:;" :class="{'check-login': active == 2}" @click="active = 2">验证登录</a>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="userName">
                    <el-input
                      clearable
                      ref="mark"
                      id="getCursor"
                      v-model="userLoginForm.userName"
                      placeholder="请输入手机号/账号"
                      name="username"
                      type="text"
                      auto-complete="off"
                    >
                      <i class="iconfont icon-ren" slot="prefix" style="font-size:12px;"></i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top:15px;">
                  <el-form-item prop="userPwd"
                                :rules="[
                        {required: true, message: '密码必须且6到12位', trigger: 'blur', min: 6, max: 12}
                      ]">
                    <el-input type="password" clearable v-model="userLoginForm.userPwd" placeholder="请输入密码" auto-complete="off" @keyup.enter.native="submit">
                      <i class="iconfont icon-mimasuo" slot="prefix" style="font-size:12px;"></i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button :loading="loading" class="login-btn" @click.native.prevent="submit">登 录</el-button>
                </el-col>
                <el-col :span="18">
                  <el-form-item style="border:none;">
                    <!--<el-switch v-model="loginForm.remember"></el-switch>-->
                    <el-checkbox v-model="userLoginForm.remember" :class="{'is-checked': checked}" >记住密码</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item style="border:none">
                    <a href="javascript:;" style="color:#FF8800" @click="goFindWeb">忘记密码</a>
                  </el-form-item>
                </el-col>
                <el-col :span="16" :offset="5">
                  <span style="color:#E7EDF1">———— </span><a class="register-text" href="javascript:;" @click="goRegisterWeb"> 立即注册 </a><span style="color:#E7EDF1">  ————</span>
                </el-col>
              </el-form>
            </div>
            <div v-if="active == 2">
              <el-form ref="codeLoginForm" :model="codeLoginForm" class="login-form" auto-complete="on" label-position="left">
                <el-col :span="24">
                  <div class="title-container">
                    <p class="lg-title"><span>登录SaaS云</span></p>
                    <p class="title">
                      <a href="javascript:;" :class="{'check-login': active == 1}" @click="active = 1">账号登录</a>
                      <span style="padding: 0px 26px;font-size: 16px;color:#979797"> |</span>
                      <a href="javascript:;" :class="{'check-login': active == 2}" @click="active = 2">验证登录</a>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="loginPhone"
                                :rules="[
                      {required: true, message: '请输入手机号码', trigger: 'blur'},
                      { validator: isPhoneAlias, message: '手机号格式有误', trigger: 'blur' }
                    ]">
                    <el-input
                      clearable
                      ref="mark"
                      v-model="codeLoginForm.loginPhone"
                      placeholder="请输入手机号"
                      name="username"
                      type="text"
                      auto-complete="off"
                    >
                      <i class="iconfont icon-ren" slot="prefix" style="font-size:12px;"></i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top:15px;">
                  <el-form-item prop="loginCode" :rules="[
              {required: true, message: '验证码必须', trigger: 'blur'}
            ]">
                    <el-input v-model="codeLoginForm.loginCode" @keyup.enter.native="codeLogin" clearable placeholder="请输入验证码">
                      <!--<span class="show-pwd" ><svg-icon icon-class="eye" /></span>-->
                      <i class="iconfont icon-yanzhengma2" slot="prefix" style="font-size:14px;position:relative;top:12px;"></i>
                      <template slot="append">
                        <el-button  @click.prevent="getLoginCode" :disabled="times > 0">{{ verificationCodeText }}</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button :loading="loadingCodeLogin" class="login-btn" @click.native.prevent="codeLogin('fhblogin')">登 录</el-button>
                </el-col>
                <el-col :span="18">
                  <el-form-item style="border:none;">
                    <!--<el-switch v-model="loginForm.remember"></el-switch>-->
                    <el-checkbox v-model="codeLoginForm.remember" :class="{'is-checked': checked}" >记住密码</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item style="border:none">
                    <a href="javascript:;" style="color:#FF8800" @click="goFindWeb">忘记密码</a>
                  </el-form-item>
                </el-col>
                <el-col :span="16" :offset="5">
                  <span style="color:#E7EDF1">———— </span><a class="register-text" href="javascript:;" @click="goRegisterWeb"> 立即注册 </a><span style="color:#E7EDF1">  ————</span>
                </el-col>
              </el-form>
            </div>
            <div v-show="active == 3">
              <el-form ref="registerForm" :model="registerForm" class="login-form2" auto-complete="on" label-position="left">
                <el-col :span="24">
                  <div class="title-container">
                    <p class="lg-title" style="margin:5px auto;"><span>注册</span></p>
                    <p style="margin: 10px auto;">
                      <el-steps :active="activeRegStep" align-center style="font-size:12px;">
                        <el-step title="账号信息"></el-step>
                        <el-step title="资质认证"></el-step>
                        <el-step title="注册成功"></el-step>
                      </el-steps>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <el-row :gutter="5">
                    <div v-show="activeRegStep == 1">
                      <el-col :span="24" style="margin-top:55px;">
                        <el-form-item prop="registerPhone"
                                      :rules="[
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        { validator: isPhone, message: '手机号格式有误', trigger: 'blur' }
                      ]">
                          <el-input
                            ref="mark"
                            clearable
                            v-model="registerForm.registerPhone"
                            placeholder="请输入手机号"
                            name="username"
                            type="text"
                            auto-complete="off"
                          >
                            <i class="iconfont icon-ren" slot="prefix" style="font-size:12px;"></i>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" style="margin: 15px auto;">
                        <el-form-item prop="registerCode" :rules="[
                          {required: true, message: '验证码必须', trigger: 'blur'}
                             ]">
                          <el-input v-model="registerForm.registerCode" placeholder="请输入6位短信验证码">
                            <i class="iconfont icon-yanzhengma2" slot="prefix" style="font-size:14px;position:relative;top:12px;"></i>
                            <template slot="append">
                              <el-button @click.prevent="getRegisterCode" :loading="codeLoading" :disabled="times3 > 0"><span>{{ verificationCodeText3 }}</span></el-button>
                            </template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item prop="pwd"
                                      :rules="[
                      {required: true, message: '密码必须且6到12位', trigger: 'blur', min: 6, max: 12}
                    ]">
                          <el-input type="password" clearable v-model="registerForm.pwd" placeholder="请输入密码" auto-complete="off" @keyup.enter.native="registerLogin">
                            <i class="iconfont icon-mimasuo" slot="prefix" style="font-size:12px;"></i>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" style="margin-top:15px;margin-bottom:40px;">
                        <el-form-item prop="registerPwdTwo"
                                      :rules="[
                        {required: true, message: '再次确认必须', trigger: 'blur'},
                        {validator: isSame, otherValue: registerForm.pwd, message: '两次密码不一致,请重新输入', trigger: 'blur'}
                      ]">
                          <el-input type="password" v-model="registerForm.registerPwdTwo" placeholder="确认密码" auto-complete="off" @keyup.enter.native="submitFindPsw">
                            <i class="iconfont icon-mimasuo" slot="prefix" style="font-size:12px;"></i>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="activeRegStep == 2">
                      <el-col :span="12">
                        <el-form-item prop="companyName"
                                      :rules="[
                        {required: true, message: '公司名称必须', trigger: 'blur'},
                        {validator: isChinese, message: '只能输入中文', trigger: 'blur'}
                      ]">
                          <el-input type="text" v-model="registerForm.companyName" placeholder="公司营业执照名称">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item prop="communityCode"
                                      :rules="[
                        {required: true, message: '信用代码必须', trigger: 'blur'},
                        {validator: isEnglishOrNumber, message: '只能输入英文字母或数字', trigger: 'blur'},
                        {message: '输入长度不得低于15位数字或字母', trigger: 'blur', min: 15}
                      ]">
                          <el-input type="text" v-model="registerForm.communityCode" placeholder="统一社会信用代码">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item prop="legalPerson"
                                      :rules="[
                        {required: true, message: '法人姓名必须', trigger: 'blur'},
                        {validator: isChinese, message: '只能输入中文', trigger: 'blur'}
                      ]">
                          <el-input type="text" v-model="registerForm.legalPerson" placeholder="法定代表人">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="">
                        <el-form-item prop="serviceHotline"
                                      :rules="[
                        {validator: isInteger, message: '请输入数字！', trigger: 'blur'},
                        {required: true, message: '对外服务热线必填(8~11位数字)', trigger: 'blur', min: 8, max: 11}
                      ]">
                          <el-input type="text" v-model="registerForm.serviceHotline" placeholder="公司服务热线 (显示在打印单据上)">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="">
                        <el-form-item prop="DAddress">
                          <cascade-address :level="3" v-model="registerForm.DAddress" placeholder="公司住所(省市区)" style="width: 100%"></cascade-address>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="">
                        <el-form-item prop="detailAddress"
                                      :rules="[
                        {required: true, message: '详细地址必须', trigger: 'blur'}
                      ]">
                          <el-input type="text" v-model="registerForm.detailAddress" placeholder="详细地址">
                            <!--天府二街138号1期3栋508-->
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="">
                        <el-form-item prop="contactsName"
                                      :rules="[
                        {required: true, message: '联系人姓名必须', trigger: 'blur'}
                      ]">
                          <el-input type="text" v-model="registerForm.contactsName" placeholder="公司联系人(业务联系人姓名)">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="">
                        <el-form-item prop="contactsPhone"
                                      :rules="[
                        {required: true, message: '联系电话', trigger: 'blur'},
                        {validator: isPhone, message: '手机号格式不正确', trigger: 'blur'},
                      ]">
                          <el-input type="text" v-model="registerForm.contactsPhone" placeholder="联系人电话(手机号码)">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="position:relative">
                        <el-form-item   prop="businessLicense"
                                        :rules="[
                         {required: true, message: '营业执照必须', trigger: 'change', type: 'array'}
                      ]">
                          <!--<uploadImage v-model="model.businessLicense" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>-->
                          <UploadImage v-model="registerForm.businessLicense" :max="1" :formData="{group: '1'}"></UploadImage>
                        </el-form-item>
                        <span style="font-size:12px;color:gray;position:absolute;bottom:16px;left:26%;">《营业执照》</span>
                      </el-col>
                      <el-col :span="12" style="position:relative">
                        <el-form-item   prop="carriageTestify"
                                        :rules="[
                         {required: true, message: '道路运输许可证必须', trigger: 'change', type: 'array'}
                      ]">
                          <!--<uploadImage v-model="model.carriageTestify" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>-->
                          <UploadImage v-model="registerForm.carriageTestify" :max="1" :formData="{group: '2'}"></UploadImage>
                        </el-form-item>
                        <span style="font-size:12px;color:grey;position:absolute;bottom:16px;left:26%;">《道路运输许可证》</span>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item style="border:none;">
                          <el-checkbox v-model="registerForm.isAgree" :class="{'is-checked': registerForm.isAgree}" >我已阅读并同意 <span style="color:#FF8800;font-size:13px;">《用户服务协议》</span></el-checkbox>
                        </el-form-item>
                      </el-col>

                    </div>
                    <div v-show="activeRegStep == 3">
                      <el-col :span="16" :offset="4" style="margin-top:50px;">
                        <el-form-item style="text-align:center">
                          <p><i class="el-icon-success m--font-success" style="font-size: 80px;color:#57D092"></i></p>
                          <p>注册成功，我们将在2~3个工作日内完成物流商资质审核，审核结果将通过短信发送至申请账号手机，请注意查收！</p>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-show="activeRegStep == 4">
                      <el-col :span="16" :offset="4">
                        <el-form-item style="text-align:center">
                          <p><i class="el-icon-error m--font-error" style="font-size: 80px;color:#57D092"></i></p>
                          <p>注册失败</p>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-button class="btn-block btn-lg"  type="primary" style="width:100%" @click.native.prevent="active = 1">
                          返回登录
                        </el-button>
                      </el-col>
                    </div>
                    <el-col :span="24" v-show="activeRegStep != 4">
                      <el-button class="btn-block btn-lg" :loading="loadingRegister" type="primary" style="width:100%" @click.native.prevent="registerSubmit">
                        {{registerBtnText}}
                      </el-button>
                    </el-col>
                    <el-col :span="18" :offset="4" style="margin-top:10px;" v-show="activeRegStep == 1">
                      <p style="text-align:center;font-size:14px;font-weight:400;color:#333333">
                        <span style="color:#E7EDF1">>———— </span><span style="cursor:pointer;margin-right:8px;" @click="active = 1">立即登录</span>  <span style="color:#E7EDF1">>———— </span>
                      </p>
                    </el-col>
                  </el-row>
                </el-col>

              </el-form>

            </div>
            <div v-if="active == 4">
              <el-form ref="findForm" :model="findForm" class="login-form" auto-complete="on" label-position="left">
                <el-col :span="24">
                  <div class="title-container">
                    <p class="lg-title" style="margin: 25px auto;"><span>找回密码</span></p>
                    <p style="margin: 45px auto;">
                      <el-steps :active="activeStep" align-center>
                        <el-step title="验证身份"></el-step>
                        <el-step title="设置登录密码"></el-step>
                        <el-step title="完成"></el-step>
                      </el-steps>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <!--<el-form class="login-form" :model="findModel" ref="findModelForm">-->
                  <el-row>
                    <div v-show="activeStep == 1">
                      <el-col :span="24">
                        <el-form-item prop="findPhone"
                                      :rules="[
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        { validator: isPhone, message: '手机号格式有误', trigger: 'blur' }
                      ]">
                          <el-input
                            ref="mark"
                            clearable
                            v-model="findForm.findPhone"
                            placeholder="请输入手机号"
                            name="username"
                            type="text"
                            auto-complete="off"
                          >
                            <i class="iconfont icon-ren" slot="prefix" style="font-size:12px;"></i>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" style="margin: 15px auto;">
                        <el-form-item prop="findCode" :rules="[
                          {required: true, message: '验证码必须', trigger: 'blur'}
                             ]">
                          <el-input v-model="findForm.findCode" placeholder="请输入6位验证码">
                            <i class="iconfont icon-yanzhengma2" slot="prefix" style="font-size:14px;position:relative;top:12px;"></i>
                            <template slot="append">
                              <el-button @click.prevent="getFindPswCode" :disabled="times4 > 0"><span>{{ verificationCodeText4 }}</span></el-button>
                            </template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-show="activeStep == 2">
                      <el-col :span="24">
                        <el-form-item prop="findPwd"
                                      :rules="[
                        {required: true, message: '密码必须且6~12位', trigger: 'blur', min: 6, max: 12}
                      ]">
                          <el-input type="password" v-model="findForm.findPwd" auto-complete="off" placeholder="设置密码">
                            <!--<span slot="prefix" style="font-size:12px;">设置密码</span>-->
                            <!--<template slot="prepend"><span style="font-size:12px;">设置密码</span></template>-->
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" style="margin: 15px auto;">
                        <el-form-item prop="findPwdTwo"
                                      :rules="[
                        {required: true, message: '再次确认必须', trigger: 'blur'},
                        {validator: isSame, otherValue: findForm.findPwd, message: '两次输入的密码不一致', trigger: 'blur'}
                      ]">
                          <el-input type="password" v-model="findForm.findPwdTwo" placeholder="确认密码" auto-complete="off" @keyup.enter.native="submitFindPsw">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="activeStep == 3">
                      <el-col :span="16" :offset="4">
                        <el-form-item style="text-align:center">
                          <p><i class="el-icon-success m--font-success" style="font-size: 80px;color:#57D092"></i></p>
                          <p>找回成功</p>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="activeStep == 4">
                      <el-col :span="16" :offset="4">
                        <el-form-item style="text-align:center">
                          <p><i class="el-icon-error m--font-error" style="font-size: 80px;color:#57D092"></i></p>
                          <p>找回失败</p>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-button class="btn-block btn-lg"  type="primary" style="width:100%" @click.native.prevent="active = 1">
                          返回登录
                        </el-button>
                      </el-col>
                    </div>
                    <el-col :span="24" v-if="activeStep != 4">
                      <el-button class="btn-block btn-lg" :loading="loading" type="primary" style="width:100%" @click.native.prevent="submit">
                        {{ activeStep == 3 ? '立即登录' : '下一步' }}
                      </el-button>
                    </el-col>
                    <el-col :span="18" :offset="4" style="margin-top:10px;" v-if="activeStep == 1">
                      <p style="text-align:center;font-size:14px;font-weight:400;color:#333333">
                        <span style="cursor:pointer;margin-right:8px;" @click="active = 1">立即登录 </span>  | <span style="cursor:pointer;margin-left:5px;" @click="goRegisterWeb"> 立即注册</span>
                      </p>
                    </el-col>
                  </el-row>
                  <!--</el-form>-->
                </el-col>
              </el-form>
            </div>
            <!--<el-col :span="16" :offset="6" v-show="active == 1 || active == 2">-->
            <!--<span style="color:#E7EDF1">———— </span><a class="register-text" href="javascript:;" @click="active = 3"> 立即注册 </a><span style="color:#E7EDF1">  ————</span>-->
            <!--</el-col>-->
            <!--<el-col :span="16" :offset="6" v-if="active == 3">-->
            <!--<span style="color:#E7EDF1">———— </span><a class="register-text" href="javascript:;" @click="active = 1"> 立即登录 </a><span style="color:#E7EDF1">  ————</span>-->
            <!--</el-col>-->
          </el-row>

          <!--</el-form>-->
        </div>
      </div>

    </div>
    <div class="foot-box">
      <div class="foot-text"><span>———— 四川居家智享信息技术有限公司 ————</span></div>
    </div>
  </div>
</template>

<script>
import {isPhone, isSame, isPhoneAlias, isChinese, isEnglishOrNumber, isInteger} from '@/utils/validate'
import {isPhoneUtil} from '@/utils/validatorUtil'
// import { isvalidUsername, isPhone } from '@/utils/validate'
import {alert, dotData} from '@/utils'
// import {alert, dotData, confirm, copy} from '@/utils'
import {setOperationList, setTempToken} from '@/utils/auth.js'
// import {setOperationList, setUserInfoData} from '@/utils/auth.js'
// import TimeReduce from '@/utils/TimeReduce'
export default {
  name: 'Login',
  data() {
    return {
      loginHeight: '',
      projectType: process.env.projectType,
      active: 1, // 默认 为账号登录1,验证登录2，注册3，忘记密码4
      activeStep: 1,
      activeRegStep: 1,
      codeLoading: false,
      verificationCodeText: '获取验证码',
      verificationCodeText3: '获取验证码',
      verificationCodeText4: '获取验证码',
      times: 0, // 验证登录
      times3: 0, // 注册
      times4: 0, // 找回
      config: {
        times: 60, // 验证登录
        times3: 60, // 注册
        times4: 60 // 找回
      },
      checked: false,
      userLoginForm: { // 账号登录
        userName: '',
        userPwd: '',
        remember: false
      },
      codeLoginForm: { // 验证码登录
        loginPhone: '',
        loginCode: '',
        remember: false
      },
      registerForm: {
        registerPhone: '',
        registerCode: '',
        pwd: '',
        registerPwdTwo: '',
        companyName: '',
        communityCode: '',
        legalPerson: '',
        serviceHotline: '',
        DAddress: [],
        detailAddress: '',
        contactsName: '',
        contactsPhone: '',
        businessLicense: [],
        carriageTestify: [],
        isAgree: false // 默认没有同意协议
      },
      findForm: {
        findPhone: '',
        findCode: '',
        findPwd: '',
        findPwdTwo: ''
      },
      loginUser: {},
      loadingRegister: false,
      loadingCodeLogin: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      backRegisterCode: '' // 注册页面 验证code正确后返回来的二次验证码
    }
  },
  watch: {
    // 切换账号登和验证登后 清空表单
    active(val, oldVal) {
      this.$nextTick(_ => {
        this.clearForms()
      })
      this.loading = false
    },
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }

  },
  mounted() {
    this.loginHeight = document.documentElement.clientHeight + 'px'
    document.getElementById('getCursor').focus() // 默认光标的位置
  },
  created() {
    // this.$nextTick(_ => {
    //   this.$refs.mark.$el.querySelector('input').focus()
    // })
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  computed: {
    registerBtnText() {
      if (this.activeRegStep === 1) {
        return '下一步'
      } else if (this.activeRegStep === 2) {
        return '立即注册'
      } else if (this.activeRegStep === 3 || this.activeRegStep === 4) {
        return '返回登录'
      }
      return ''
    }
  },
  methods: {
    isInteger,
    isSame,
    isPhone,
    isPhoneAlias,
    isEnglishOrNumber,
    isChinese,
    // 验证码登录 发送验证码,判断授权否
    getLoginCode() {
      if (this.codeLoginForm.loginPhone) {
        if (!isPhoneUtil(this.codeLoginForm.loginPhone)) {
          alert(`手机号(${this.codeLoginForm.loginPhone})格式不正确`)
          return
        }
        this.$ajax.get('/ms-common-user/user/sendSms', {
          phone: this.codeLoginForm.loginPhone,
          actionId: 'login'
        }).then(response => {
          const status = dotData(response, 'data.status')
          // 若已授权，则直接登录
          if (status === 'error') {
            const firstAuthCode = dotData(response, 'data.firstAuthCode')
            let statusText = this.statusText(firstAuthCode)
            let message = `<P><img src="/static/images/faHuoBao/xiaoer.png" style="width: 60px;height: 60px;border-radius: 50%!important;" alt=""><P>
                          <p class="statusTips">你已通过${statusText}注册居家小二通行证，</p><p>你可以直接登录</p>`
            this.$confirm(message, '温馨提示', {
              confirmButtonText: '前往登录',
              showCancelButton: false,
              dangerouslyUseHTMLString: true,
              confirmButtonClass: 'loginTipsbutton',
              center: true
            }).then(_ => {
              this.active = 1
            })
          } else if (status === 'success') {
            this.times = this.config.times
            this.timeReduce()
          }
          if (response.success) {
            this.times = this.config.times
            this.timeReduce()
          }
        })
      } else {
        alert('请输入手机号')
      }
    },
    // 验证码登录 倒计时
    timeReduce() {
      if (this.times > 0) {
        this.verificationCodeText = this.times + 's后重新获取'
        setTimeout(this.timeReduce, 1000)
        this.times -= 1
      } else {
        this.verificationCodeText = '获取验证码'
      }
    },
    // 注册账号来源
    statusText(status) {
      switch (status) {
        case 'storeWeb' : return '居家小二SaaS云'
        case 'fhbBack' : return '居家小二运营后台'
        case 'platWorker' : return '居家小二师傅端'
        default : return ''
      }
    },
    // 找密码 发送验证码+判断是否授权
    getFindPswCode() {
      if (this.findForm.findPhone) {
        this.times4 = this.config.times4
        this.timeReduce4()
        this.$ajax.get('/ms-common-user/user/sendSms', {
          phone: this.findForm.findPhone,
          actionId: 'resetPassword'
        }).then(result => {
          const status = dotData(result, 'data.status')
          if (status === 'error') {
            this.$confirm('该账号尚未授权，不能进行此操作', '温馨提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              dangerouslyUseHTMLString: true,
              confirmButtonClass: 'loginTipsbutton',
              center: true
            }).then(_ => {
              this.active = 1
            })
          }
        })
      } else {
        alert('请输入手机号')
      }
    },
    // 找密码 倒计时
    timeReduce4() {
      if (this.times4 > 0) {
        this.verificationCodeText4 = this.times4 + 's后重新获取'
        setTimeout(this.timeReduce4, 1000)
        this.times4 -= 1
      } else {
        this.verificationCodeText4 = '获取验证码'
      }
    },
    // 账号登录+商家资料完善+商家授权
    userLoginSubmit() {
      this.$refs.userLoginForm.validate(result => {
        if (!result) {
          return
        }
        let postData = {
          phone: this.userLoginForm.userName,
          pwd: this.userLoginForm.userPwd,
          projectType: this.projectType
        }
        this.loading = true
        this.$ajax.post('/ms-common-user/user/login', postData).then(response => {
          const status = dotData(response, 'data.status')
          const errorMsg = dotData(response, 'data.errorMsg')
          const examineState = dotData(response, 'data.isTrunk') // 2：审核未通，去重填，1：审核中, 0: 资质信息不齐全
          let isAccredit = dotData(response, 'data.isAccredit') // 0:代表未授权，--去授权，然后进入审核中
          console.log('是否授权isAccredit', isAccredit, 'typeof', typeof isAccredit)
          if (status === 'success') {
            this.loginUser = response.data
            console.log('response.data', response.data)
            this.token = dotData(response, 'data.token')
            this.user = dotData(response, 'data.user')
            // const userId = dotData(response, 'data.user.id')
            // 登入
            let operationList = dotData(response, 'data.operation-list')
            if (Array.isArray(operationList)) {
              // login.setOperationList(operationList)
              setOperationList(operationList)
            }
            // 登入，传数据给vueX
            this.$store.dispatch('LoginUser', this.loginUser).then(_ => {
              window.location.href = '/'
            }).catch(e => {
              alert(e.message)
            })
          } else if (status === 'error') {
            console.log('/login 返回的是否授权isAccredit', isAccredit)
            // 1、先判断授权与否，
            if (isAccredit === '0') { // 未授权，去资料编辑页面 提交，然后进入审核中静态页面
              this.token = dotData(response, 'data.token')
              console.log('未授权的token', this.token, 'response', response)
              this.user = dotData(response, 'data.user')
              let userId = dotData(this.user, 'id')
              let userPhone = dotData(this.user, 'phone')
              setTempToken(this.token)
              this.$confirm(errorMsg, '提示', {
                confirmButtonText: '未授权，前往完善公司资质',
                type: 'warning',
                showCancelButton: false,
                center: true
              }).then(_ => {
                this.$router.push({path: '/edit-company', query: {isNotGavePower: 1, userId, userPhone}})
              })
            } else {
              // 2、再判断审核结果
              if (examineState === '2') { // 2：审核未通，去重填，1：审核中, 0: 资质信息不齐全
                // 假登录，暂存token到缓存里(审核被驳回时，需要假登录去到单独的资质修改页面)
                this.token = dotData(response, 'data.token')
                setTempToken(this.token)
                // 去修改资质
                this.$confirm(`
            <p>尊敬的用户，您好。您的承运商资质审核因<span class="font-red">${errorMsg}</span>
            未能通过审核。您可以根据未通过原因，编辑资料后再次提交审核</p>
            <p></p>
          `, '审核通知', {
                  center: true,
                  confirmButtonText: '再次提交',
                  showCancelButton: true,
                  cancelButtonText: '取消',
                  dangerouslyUseHTMLString: true
                }).then(_ => {
                  this.$router.push({path: '/edit-company', query: {isNotGavePower: 2}}) // 前端自定义的标识
                })
              } else if (examineState === '1') { // 审核中
                this.$confirm(errorMsg, '提示', {
                  confirmButtonText: '关闭',
                  type: 'warning',
                  showCancelButton: false,
                  center: true
                })
              } else if (examineState === '0') { // 资料未填写完整，去往填写资质页面
                this.token = dotData(response, 'data.token')
                setTempToken(this.token)
                this.$confirm(errorMsg, '提示', {
                  confirmButtonText: '前往完善资质信息 >>',
                  type: 'warning',
                  showCancelButton: false,
                  center: true
                }).then(_ => {
                  this.$router.push({path: '/edit-company', query: {isNotGavePower: 2}})// 前端自定义的标识
                })
              }
            }
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    },
    // 切换 即清空各个表单
    clearForms() {
      if (this.$refs.userLoginForm) {
        this.$refs.userLoginForm.resetFields()
      }
      if (this.$refs.codeLoginForm) {
        this.$refs.codeLoginForm.resetFields()
      }
      if (this.$refs.registerForm) {
        this.$refs.registerForm.resetFields()
      }
      if (this.$refs.findForm) {
        this.findForm.findPhone = ''
        this.findForm.findCode = ''
        this.findForm.findPwd = ''
        this.findForm.findPwdTwo = ''
      }
    },
    // 去 注册
    goRegisterWeb() {
      this.$router.push({path: '/register'})
      // this.registerForm.registerPhone = ''
      // this.active = 3
      // if (this.$refs.registerForm) {
      //   this.$refs.registerForm.resetFields()
      // }
    },
    // 去 找回密码
    goFindWeb() {
      this.active = 4
      this.activeStep = 1
      this.$nextTick(_ => {
        if (this.$refs.findForm) {
          // this.$refs.findForm.resetFields()
          this.findForm.findPhone = ''
          this.findForm.findCode = ''
          this.findForm.findPwd = ''
          this.findForm.findPwdTwo = ''
        }
      })
    },
    // 集中管理 分发各个‘提交’按钮
    submit() {
      if (this.active === 1) { // 账号登录
        this.userLoginSubmit()
      } else if (this.active === 2) { // 验证码登录
        this.codeLogin()
      } else if (this.active === 4) { // 找回密码
        if (this.activeStep === 1) { // 验证code
          if (this.findForm.findPhone) {
            if (this.findForm.findCode) {
              this.checkCode('resetPassword').then(response => {
                if (response.success) {
                  this.activeStep = 2
                  // this.backTwoCode = dotData(response, 'data.message') 返回的二次验证码
                }
              })
            } else {
              alert('请输入验证码')
            }
          } else {
            alert('请输入手机号')
          }
        }
        if (this.activeStep === 2) { // 提交新密码
          this.submitFindPsw()
        }
        if (this.activeStep === 3) { // 找回成功后的 去登录按钮
          this.active = 1
        }
      }
    },
    // 提交 找回密码
    submitFindPsw() {
      this.$refs.findForm.validate(result => {
        if (!result) {
          return
        }
        let postData = {
          phone: this.findForm.findPhone,
          pwd: this.findForm.findPwd
        }
        this.$ajax.post('/ms-common-user/user/savePwd', postData).then(data => {
          const success = dotData(data, 'success')
          if (success) {
            console.log('新密码设置成功')
            this.activeStep = 3
          } else {
            console.log('找回失败')
            this.activeStep = 4
          }
        })
      })
    },
    // 验证码登录
    codeLogin() {
      this.$refs.codeLoginForm.validate(result => {
        if (!result) {
          return
        }
        let userDat = {
          phone: this.codeLoginForm.loginPhone,
          verifyCode: this.codeLoginForm.loginCode,
          projectType: this.projectType
        }
        this.loadingCodeLogin = true
        this.$ajax.post('/ms-common-user/user/login', userDat).then(response => {
          const status = dotData(response, 'data.status')
          const errorMsg = dotData(response, 'data.errorMsg')
          const examineState = dotData(response, 'data.isTrunk')
          if (status === 'success') {
            this.loginUser = response.data
            this.token = dotData(response, 'data.token')
            this.user = dotData(response, 'data.user')
            // const userId = dotData(response, 'data.user.id')
            // 登入
            let operationList = dotData(response, 'data.operation-list')
            if (Array.isArray(operationList)) {
              // login.setOperationList(operationList)
              setOperationList(operationList)
            }
            // 登入，传数据给vueX
            // this.$store.dispatch('LoginUser', this.loginUser).then(_ => {
            //   window.location.href = '/'
            // }).catch(e => {
            //   alert(e.message)
            // })
          } else if (status === 'error') {
            if (examineState === '2') { // 2：审核未通，去重填，1：审核中
              // 假登录，暂存token到缓存里
              this.token = dotData(response, 'data.token')
              console.log('111111', this.token)
              setTempToken(this.token)
              // 去修改资质
              this.$confirm(`
            <p>尊敬的用户，您好。您的承运商资质审核因<span class="font-red">${errorMsg}</span>未能通过审核。您可以根据未通过原因，编辑资料后再次提交审核</p>
            <p></p>
          `, '审核通知', {
                center: true,
                confirmButtonText: '再次提交',
                showCancelButton: true,
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true
              }).then(_ => {
                this.$router.push({path: '/edit-company'})
              })
              // this.$confirm(errorMsg, '提示', {
              //   type: 'error',
              //   confirmButtonText: '确定',
              //   showCancelButton: false,
              //   center: true
              // })
            } else {
              this.$confirm(errorMsg, '提示', {
                confirmButtonText: '关闭',
                type: 'warning',
                showCancelButton: false,
                center: true
              })
            }
          }
        }).finally(_ => {
          this.loadingCodeLogin = false
        })
      })
    },
    // 改-通用：检验验证码 正确否,并返回二次验证码
    checkCode(markType) {
      return new Promise((resolve, reject) => {
        console.log('now--actionId----', markType)
        let checkData = {}
        if (markType === 'register') {
          checkData = {
            actionId: markType,
            phone: this.registerForm.registerPhone,
            code: this.registerForm.registerCode
          }
        }
        if (markType === 'resetPassword') {
          checkData = {
            actionId: markType,
            phone: this.findForm.findPhone,
            code: this.findForm.findCode
          }
        }
        this.$ajax.get('/ms-common-user/user/check-verification-code', checkData).then(response => {
          console.log(response, 'response.success', response.data)
          if (response.success) { // 若验证码正确，则接着往下执行 成功回调
            resolve(response)
          }
        })
      })
    },
    // 管理注册的 按钮
    registerSubmit() {
      this.$refs.registerForm.validate(result => {
        if (!result) {
          return
        }
        if (this.activeRegStep === 1) { // 第一步的按钮：检查验证码正确否
          this.checkRegisterCode()
        } else if (this.activeRegStep === 2) { // 第二步的按钮：提交资质认证
          this.submitCompany()
        } else if (this.activeRegStep === 3 || this.activeRegStep === 4) { // 最后一步的按钮：返回
          this.active = 1
          this.activeRegStep = 1
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $bg:#fff;
  $dark_gray: #63717b;
  $light_gray:#409EFF;
  $light_blue:#409EFF;
  $border_gray:#dadada;
  $cursor: #000;

  .check-login {
    color:#FF8800
  }
  .oms_allBg {
    background: url('/static/images/bgColor.png') no-repeat; /*整个背景图*/
    background-size: 100% 100%;
    /*-moz-background-size: cover;*/
    /*-webkit-background-size: cover;*/
    /*background-size: cover;*/
    -moz-background-size: cover;
    -webkit-background-size: cover;
  }
  .oms-header-box {
    width: 100%;
    height: 60px;
    background-color: white;
    text-align: center;
    position:relative;
    .imgBox {
      position:absolute;
      left:10%;
      top: 10px;
      height: 48px;
      width: 200px;
    }
    .header-text{
      width:50px;
      position:absolute;
      left:106%;
      top: 16px;
      font-size:14px;
      font-family:PingFangSC-Regular;
      font-weight:400;
    }
  }
  .oms-login-content {
    /*position: relative;*/
    height: 100%;
    width: 100%;
    background: url('/static/images/bgColor.png') no-repeat; /*整个背景图*/
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    /*登录框*/
    .login-window-box {
      /*border: 1px solid green;*/
      /*position:relative;*/
      /*right:1%;*/
      /*top:10%;*/
      /*width:437px;*/
      width:1000px;
      height:466px;
      /*暂时屏蔽 垂直居中*/
      margin:10% auto;
    }
    .login-box-left{
      width:477px;
      height:466px;
      float: left;
      background: url('/static/images/left_bg3.png') no-repeat;
    }
    .login-box-content {
      /*border:4px solid greenyellow;*/
      float: right;
      width:437px;
      height:466px;
    }
    .login-form {
      position: absolute;
      width:437px; /*form宽度*/
      /*max-width: 100%;*/
      height:466px;
      padding: 2px 35px 15px 35px;
      background-color: white;
    }
    .login-form2 {
      /*border:1px solid deeppink;*/
      position: absolute;
      width:580px; /*form宽度*/
      /*max-width: 100%;*/
      padding: 2px 35px 15px 35px;
      background-color: white;
    }
    .login-btn {
      width:100%;
      margin-top:13px;
      background-color: rgb(255, 136, 0);color:white;
    }
    /*.tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }*/
    .title-container { /*登录标题默认大小 颜色*/
      position: relative;
      .lg-title {
        text-align: center;
        width:146px;
        margin:20px auto;
        height:33px;
        font-size:24px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:33px;
      }
      /*登录 小标题*/
      .title {
        font-size: 18px;
        /*标题文字颜色*/
        color: #979797;
        margin: 30px auto 40px auto;
        text-align: center;
        font-weight: 400;
        font-family:PingFangSC-Regular;
        font-weight:400;
        /*color:rgba(255,136,0,1);*/
        line-height:25px;
      }
      /*.set-language {
        color: #fff;
        position: absolute;
        top: 5px;
        right: 0px;
      }*/
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
    .register-text {
      width:56px;
      height:20px;
      font-size:14px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:18px;
      text-decoration: none;
    }
  }
  .foot-box {
    position:fixed;
    left:0;
    bottom:0;
    width: 100%;
    height: 50px;
    background-color: white;
    z-index: 999;
    text-align: center;
    .foot-text {
      width:380px;
      height:20px;
      margin: 16px auto;
      color:rgba(171,185,203,1);
      font-size:14px;
      font-family:PingFangSC-Light;
    }
  }
</style>
